<template>
  <div class="hospitals">
     <van-popup v-model:show="show" :closeable="true">
      <img src="../../assets//imgs/popup.png" alt="" width="300px" />
    </van-popup>
    <van-sticky>
      <div class="inp">
        <!-- 输入框以及j签到功能以及输入框滚动 -->
        <div class="input" type="text" placeholder="输入疾病|药品|症状|医生|检查" style="z-index: 9999">
          <div style="
              width: 18.125rem;
              height: 2.375rem;
              overflow: hidden;
              font-size: 0.75rem;
              padding: 0 0.0625rem;
            ">
            <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
              <van-swipe-item>糖尿病
                <span
                  style="width: 1.5625rem; height: 1.5625rem; color: red; background-color: #ffa689">热</span></van-swipe-item>
              <van-swipe-item>盐酸帕罗西汀片<span
                  style="width: 1.5625rem; height: 1.5625rem; color: red; background-color: #ffa689">热</span></van-swipe-item>
              <van-swipe-item>易坦静</van-swipe-item>
              <van-swipe-item>儿科</van-swipe-item>
              <van-swipe-item> 霉菌性阴道炎</van-swipe-item>
            </van-swipe>
          </div>
          <router-link to="/ShouSearch">
            <button class="btn">搜索</button>
          </router-link>

        </div>

        <div class="img">
          <img src="../../assets/img//fang.png" alt="" />
        </div>
        <!-- 签到部分 -->
        <div class="qian">
          <img src="https://staff.chunyu.mobi/@/media/images/2022/08/10/af07/b4f21555fe8e_w102_h102_.gif" alt="" />
        </div>
        <!-- 消息部分 -->
        <!-- <div class="message">
          <img src="../../assets//img//message.jpg" alt="" />
        </div> -->
      </div>
    </van-sticky>
    <div class="wen">
      <div class="left">
        <div class="arc">
          <img src="../../assets//img/dui.png" alt=""
            style="width: 10px; height: 10px; position: absolute; top: -1px" />
          <span class="china">国家卫健委认证医疗机构 </span>
        </div>
      </div>
      <div class="right">1.80亿用户信赖</div>
    </div>
    <!-- al聊天相关 以及找医生相关 -->
    <div class="center">
      <div class="grids">
        <div class="left-grids">
          <div class="left"></div>
          <div class="left-h1" style="position: relative" @click="handelClinic">
            <h2 style="margin-bottom: 1rem; margin-top: 1rem; margin-left: 1rem; font-weight: normal;font-size: 22px;">
              快速问诊
            </h2>
            <h3 style="font-size: 14px; font-weight: normal; color: #b4b2b3; margin-left: 1rem">
              7x24小时
              <span>只能匹配医生</span>
            </h3>
            <div>
              <img src="../../assets//img//jian.jpg" alt="" style="margin-bottom: 1.25rem" />
              <div class="bei" style="width: 13rem; height: 7rem">
                <img src="../../assets//img//dian.jpg" alt=""
                  style="position: absolute; left: 82px; top: 6rem; width: 87px; height: 67px" />
              </div>
            </div>
          </div>
        </div>
        <div class="right-grids" @click="handelDoctor">
          <div style="
              width: 35px;
              height: 1.3rem;
              background-color: #3395dc;
              position: absolute;
              right: 0;
              top: 1px;
              text-align: center;
              line-height: 1.4rem;
              color: white;
              border-top-right-radius: 10px;
              border-bottom-left-radius: 10px;
              font-size: 10px;
            ">
            专业
          </div>

          <h2 style="
              margin-bottom: 1rem;
              margin-left: -0.75rem;
              font-weight: 900;
              font-weight: normal;
              font-size: 22px;
              top: 20px;
            ">
            找医生
          </h2>


          <h3 style="
              font-size: 0.7rem;
              font-weight: normal;
              color: #b4b2b3;
              margin-left: -0.75rem;
              margin-top: 6px;
              font-size: 12px;
            ">
            全国66万全国任意选
          </h3>
          <img src="../../assets//img//doc.jpg" alt=""
            style="width: 3rem; height: 2.5rem; position: absolute; right: 0.3rem; bottom: 2.2rem" />
        </div>
        <div class="right1-grids">
          <h2 style="margin-left: 0.25rem; font-weight: normal;font-size: 22px;">送货上门</h2>
          <h3 style="

              font-weight: normal;
              color: #b4b2b3;
              margin-left: 0.25rem;
              margin-top: 6px;
              font-size: 12px;
            ">
            全国发货&emsp;正品保障
          </h3>
          <img src="./../../assets//img/yao.jpg" alt=""
            style="width: 3rem; height: 2.5rem; position: absolute; right: 0.3rem; bottom: 2.2rem" />
        </div>
      </div>
      <!-- 轮播 -->
      <!-- <div style="width: 100%; height: 8rem; margin-top: 1rem">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in ImageList" :key="index" @click="LUoburl(item)">
            <img :src="item.image" alt="" />
          </van-swipe-item>
         
        </van-swipe>
      </div> -->
      <div>
        <Swiper></Swiper>
      </div>
      <div>
        <SwGridView></SwGridView>
      </div>
      <!-- <div class="main">
        <dl class="grid-item">
          <dt><img src="../.././../public/image/banner1.png" alt="" /></dt>
          <dd>图文急诊</dd>
        </dl>
        <dl class="grid-item">
          <dt><img src="../../../public/image/banner11.png" alt="" /></dt>
          <dd>电话问诊</dd>
        </dl>
        <dl class="grid-item">
          <dt><img src="../.././../public/image/banner12.png" alt="" /></dt>
          <dd>春雨慧问</dd>
        </dl>
        <dl class="grid-item">
          <dt><img src="../.././../public/image/banner15.png" alt="" /></dt>
          <dd>自诊自查</dd>
        </dl>
        <dl class="grid-item">
          <dt><img src="../.././../public/image/banner13.png" alt="" /></dt>
          <dd>找医院</dd>
        </dl>
        <dl class="grid-item">
          <dt><img src="../.././../public/image/banner3.png" alt="" /></dt>
          <dd>检查早筛</dd>
        </dl>
        <dl class="grid-item">
          <dt><img src="../.././../public/image/banner4.png" alt="" /></dt>
          <dd>健康测评</dd>
        </dl>
        <dl class="grid-item">
          <dt><img src="../.././../public/image/banner10.png" alt="" /></dt>
          <dd>视频问诊</dd>
        </dl>
        <dl class="grid-item">
          <dt><img src="../.././../public/image/banner14.png" alt="" /></dt>
          <dd>儿科门诊</dd>
        </dl>
        <dl class="grid-item">
          <dt><img src="../.././../public/image/banner5.png" alt="" /></dt>
          <dd>问诊开药</dd>
        </dl>
        <dl class="grid-item">
          <dt><img src="../.././../public/image/banner6.png" alt="" /></dt>
          <dd>权威专家</dd>
        </dl>
        <dl class="grid-item">
          <dt><img src="../.././../public/image/banner7.png" alt="" /></dt>
          <dd>特惠义诊</dd>
        </dl>
        <dl class="grid-item">
          <dt><img src="../.././../public/image/banner8.png" alt="" /></dt>
          <dd>就医陪诊</dd>
        </dl>
        <dl class="grid-item">
          <dt><img src="../.././../public/image/banner9.png" alt="" /></dt>
          <dd>疫苗预约</dd>
        </dl>
      </div> -->
      <div class="zkmz">
        <p><span class="title" style="font-weight: 200;">专科门诊</span><span class="desc">春雨高复诊率、高口碑名医</span></p>
        <p>
          <router-link to="/Tce">
            <span class="img"><img src="../../../public/image/man-ke.png" alt="" />
              <img src="../../../public/image/chun.png" alt="" />
            </span>
          </router-link>

        </p>
      </div>
      <!-- 精选医生 -->
      <!-- <div class="jingxuan">
        <h3 style="font-weight: 100; margin-left: 10px;">精选医生</h3>
        <div class="doctor">
          <div v-for="(item, index) in doctorlist" :key="index" @click="toDoctor(item)">
            <img :src="item.doctor_info.image" alt="" />
            <div>
              <p>
                {{ item.doctor_info.name }}
              </p>
              <p class="title">
                {{ item.doctor_info.title }}
                {{ item.doctor_info.clinic_name }}
              </p>
              <p class="hospital">
                {{ item.doctor_info.hospital_name }}
              </p>
              <p class="hospital_tag_text">
                {{ item.doctor_info.new_tags[0].name }}
              </p>
            </div>
          </div>
        </div>
      </div> -->



      <div class="jingxuan">
        <h3 style="font-weight: 100; margin-left: 10px">精选医生</h3>
        <div class="doctor">
          <div v-for="(item, index) in doctorlist" :key="index" @click="toDoctor(item)">
            <img :src="item.doctor_info.image" alt="" />
            <div>
              <p>
                {{ item.doctor_info.name }}
              </p>
              <p class="title">
                {{ item.doctor_info.title }}
                {{ item.doctor_info.clinic_name }}
              </p>
              <p class="hospital">
                {{ item.doctor_info.hospital_name }}
              </p>
              <p class="hospital_tag_text">
                {{ item.doctor_info.new_tags[0].name }}
              </p>
            </div>
          </div>
        </div>
      </div>


  <!-- <div class="tese">
      <div class="tese1">
        <div style="display: flex; align-items: center">
          <h1 style="font-weight: normal">特色服务</h1>
          <h5 style="color: #999999">-战式医疗健康解决方案</h5>
        </div>
        <div style="color: #999999">查看更多></div>
      </div>
      <div class="tese2">
        <a href="https://www.chunyuyisheng.com/events/special/?config_id=770">
          <img src="../../icon/21.jpg" style="margin-right: 5%; width: 45%" alt="" />
        </a>
        <a href="https://www.chunyuyisheng.com/events/special/?config_id=738">
          <img src="../../icon/22.jpg" style="width: 45%" alt="" />
        </a>
        <a href="https://www.chunyuyisheng.com/events/special/?config_id=606">
          <img src="../../icon/23.jpg" height="93" style="margin-right: 6%; width: 45%" alt="" />
        </a>
        <a href="https://www.chunyuyisheng.com/events/special/?config_id=26">
          <img src="../../icon/24.jpg" height="93" alt="" style="width: 45%" />
        </a>
        <a href="https://www.chunyuyisheng.com/events/special/?config_id=2260">
          <img src="../../icon/25.jpg" height="140" style="margin-right: 3%; width: 31%" alt="" />
        </a>
        <img src="../../icon/26.jpg" height="140" style="margin-right: 3%; width: 31%" alt="" />
        <img src="../../icon/27.jpg" height="140" alt="" style="width: 31%" />
      </div>
    </div> -->

       <div class="tsServer">
        <div class="top-doctor">
          <span class="title" style="font-size: 20px; font-weight: normal; color: #b4b2b3">特色服务</span>
          <span class="docfa">一站式医疗健康解决方案</span>
          <span class="desc">查看更多></span>
        </div>
        <div class="img">
          <p class="fk-img">
            <img src="../../../public/image/tsServer-1.png" alt="" /><img src="../../../public/image/tsServer-2.png"
              alt="" />
          </p>
          <p class="pf-img">
            <img src="../../../public/image/tsServer-3.png" alt="" /><img src="../../../public/image/tsServer-4.png"
              alt="" />
          </p>
          <p class="gz-img">
            <img src="../../../public/image/tsServer-5.png" alt="" /><img src="../../../public/image/tsServer-6.png"
              alt="" /><img src="../../../public/image/tsServer-7.png" alt="" />
          </p>
        </div>
      </div> 


      <!-- Tab切换 热点专家科普 -->
      <!-- <van-tabs v-model:active="active" shrink>
        <van-tab title="热点">
          <div v-for="(item, index) in tablist" :key="index" @click="listDetail(item)" class="tablist">
            <img :src="item.image" alt="" />
            <div>
              <p>{{ item.title }}</p>
              <p class="type">
                {{ item.channel_name }}
                {{ item.date_str }}
              </p>
            </div>
          </div>
        </van-tab>
        <van-tab title="专家科普">内容 2</van-tab>
<<<<<<< HEAD
    
      </van-tabs> -->
<div>
   <TabsView></TabsView>
</div>
       
=======

      </van-tabs>

        <!-- <TabsView></TabsView> -->
>>>>>>> f8fdea22ae4acc1c9fe5d22ca2989d51005ee5f3
    </div>
  </div>
</template>

<script setup lang="ts">
import { NoticeBar } from 'vant'
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
<<<<<<< HEAD
import SwGridView from '../../compentents/SwGrid/index.vue';
import TabsView from '../../compentents/Tabs/index.vue';
import Swiper from '../../compentents/Swiper/index.vue'
=======
import SwGridView from '../../components/HomeModule/SwGrid/index.vue';
// import TabsView from '../../compentents/Tabs/index.vue'
>>>>>>> f8fdea22ae4acc1c9fe5d22ca2989d51005ee5f3
const noticeBar = ref(localStorage.getItem('noticeBar') == 'true' ? 'true' : 'false')
import axios from 'axios'
const router = useRouter()
var ImageList = ref([])
const doctorlist = ref([])
const tablist = ref([])
const active = ref(0)

const show = ref(true)
const token = localStorage.getItem('token');
if(token){
  show.value = false;
}
var LUoburl = (item: any) => {
  window.location.href = item.url
}
const getNOtice = () => {
  //引导页
  if (noticeBar.value == 'false') {
    router.push({ path: '/yd' })
    localStorage.setItem('noticeBar', 'false')
  }
}

getNOtice()
// 上拉加载

// const onLoad = () => {
//     pagecode.value++
//     TabList()
//     Tab2List()
//     Tab3List()
//     Tab4List()
//     setTimeout(() => {
//         // 加载状态结束
//         loading.value = false;
//     }, 1500);
// };

const handelClinic = () => {
  router.push({ path: '/msgNotify' })
}

// const handelDoctor = () => {
//   router.push({ path: '/Doctor' })
// }

const toDoctor = (item) => {
  router.push({
    path: '/doctordetail',
    query: {
      item: JSON.stringify(item),
    },
  })
}

// const listDetail = (item) => {
//   router.push({
//     path: `/listdetail/${item.id}`,
//     query: {
//       id: item.id,
//     },
//   })
// }

const getTabList = async () => {
  var res = await axios.get('/static/cooperation/wap/homepage_info/')
  if (res.status == 200) {
    console.log(res.data)
    tablist.value = res.data.tabs
  }
}
// 专科门诊详情
const zkdetail = () => {
    window.location.href = zklist.value.card_list[0].cy_redirect.target_scheme
}
// tab专家科普详情
const zhuanjiandetail = (item: any) => {
    console.log(item.topic_info);

    router.push({
        path: `/kepudetail`,
        query: {
            item: JSON.stringify(item.topic_info)
        }
    })
}

const big_image = (item: any) => {
    // console.log(item.param.url);
    window.location.href = item.param.url
}

const homesearch = () => {
    router.push({ path: '/homesearch' })
}

async function DirdList() {
    const res = await axios.get('/static/cooperation/wap/homepage_info/', {
        params: {
            from_wx_mini: '1',
            need_ab_test: '1',
            abtest_v2: '1',
            version: '10.6.8',
            device_id: 'oOKH50Osc-tkNqwuSmwa0ktH4aV4'
        }
    })
    // console.log(res.data.important_position)
    girdlist.value = res.data.important_position
    console.log( girdlist.value);

}
DirdList()

async function ZKList() {
    const res = await axios.get('/static/cooperation/wap/homepage_info/', {
        params: {
            from_wx_mini: '1',
            need_ab_test: '1',
            abtest_v2: '1',
            version: '10.6.8',
            device_id: 'oOKH50Osc-tkNqwuSmwa0ktH4aV4'
        }
    })
    // console.log(res.data);
    // console.log(res.data.specialized_clinic)
    zklist.value = res.data.specialized_clinic
}
ZKList()

async function ServiceList() {
    const res = await axios.get('/static/api/v8/user_home_page/hot_sales_v2/', {
        params: {
            from_wx_mini: '1',
        }
    })
    // console.log(res.data.item_list)
    servicelist.value = res.data.item_list
}
ServiceList()

const getImage = async () => {
  var res = await axios.get('/static/cooperation/wap/homepage_info/')
  if (res.status == 200) {
    console.log(res.data.banners)
    ImageList.value = res.data.banners
  }
}
getImage()

async function DoctorList() {
  const res = await axios.get('/static/api/search/news/selected_doctor/', {
    params: {
      news_id: '203845',
    },
  })
  console.log(res.data.doctors)
  // console.log(res.data.strictly_selected_doctor.doctors)
  doctorlist.value = res.data.doctors
}
DoctorList()

// tab列表数据
async function TabList() {
  const res = await axios.get('/static/cooperation/wap/health_news/', {
    params: {
      from_wx_mini: '1',
      page: '1',
      partner: 'chunyu_wap_mini',
      release_time: '2020-04-22%2010%3A30%3A00',
      channel_id: '0',
    },
  })
  // console.log(res.data)
  console.log(res.data.content_list)
  tablist.value = res.data.content_list
}
TabList()
</script>

<style lang="scss" scoped>
.my-swipe {
  width: 100%;
  height: 100%;
}

.my-swipe img {
  width: 100%;
  height: 100%;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.inp {
  width: 100%;
  height: 4.375rem;
  background-color: #fff;
  position: relative;

  .input {
    margin-left: 0.625rem;
    padding: 0 2.5rem;
    position: absolute;
    top: 0.625rem;
    line-height: 1.375rem;
    width: 85%;
    border-radius: 30px;
    height: 2.5rem;
    border: 0.0625rem solid #6dd0a2;
    outline: none;
    z-index: 9999;
  }

  .btn {
    position: absolute;
    border-radius: 1.25rem;
    border: none;
    height: 2.25rem;
    width: 3.625rem;
    right: -0.0675rem;
    top: 0.1rem;
    background-color: #3dc18c;
    color: white;
  }

  .img img {
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    left: 1.25rem;
    top: 1.25rem;
    z-index: 9999;
  }

  .qian img {
    position: absolute;
    width: 2.1875rem;
    height: 2.1875rem;
    right: 5px;
    // z-index: 9999;
    top: 0.7813rem;
  }

  .message img {
    position: absolute;
    width: 1.875rem;
    height: 1.875rem;
    right: 0.625rem;
    top: 1.0313rem;
    z-index: 9999;
  }
}

.notice-swipe {
  height: 2.5rem;
  line-height: 2.5rem;
}

.wen {
  position: relative;

  .right {
    position: absolute;
    font-size: 0.75rem;
    right: 0.75rem;
    top: 0.75rem;
    color: #e7e7e7;
  }
}

.arc {
  width: 0.625rem;
  height: 0.652rem;
  border: 0.0625rem solid #ccc;
  border-radius: 50%;
  position: absolute;
  font-size: 0.9375rem;
  left: 0.3125rem;
  top: -0.8125rem;
}

.china {
  font-size: 0.75rem;
  color: #e7e7e7;
  width: 8.4375rem;
  position: absolute;
  left: 0.9375rem;
}

.main {
  width: 100%;
  height: 10rem;
  background: #fff;
  overflow-x: scroll;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 10px;
  align-items: center;

  .grid-item {
    height: 3.5rem;
    width: 4.3rem;

    dt {
      text-align: center;

      img {
        width: 1.7rem;
        height: 1.6rem;
      }
    }

    dd {
      font-size: 14px;
      text-align: center;
    }
  }
}


.tese {
  width: 91%;
  height: 480px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 10px;
  .tese1 {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tes2 {
    margin-left: 20px;
  }
}


.grids {
  margin-top: 0.625rem;
  width: 100%;
  height: 14.3125rem;
  background-color: #f6f6f6;
  position: relative;
  top: 0.625rem;
  clear: both;

  .left-grids {
    position: absolute;
    width: 13.4375rem;
    height: 14.3125rem;
    background-color: #fff;
    box-shadow: 5px 5px -12px 0px #ccc;

    .left {
      position: absolute;
      width: 13.4375rem;
      height: 1.875rem;
      background: url('../../assets//img//pic.jpg') no-repeat;
    }
  }

  .right-grids {
    padding: 3.1875rem 1.625rem;
    top: 0.0625rem;
    position: absolute;
    right: 0.5625rem;
    width: 11.25rem;
    height: 5rem;
    background-color: #fff;
    border-top-right-radius: 10px;

    box-shadow: 5px 5px -12px 0px #ccc;

    h2 {
      position: absolute;
      top: 0.6rem;
    }
  }

  .right1-grids {
    padding: 1.75rem 0.625rem;
    position: absolute;
    right: 0.5625rem;
    top: 7.375rem;
    width: 11.25rem;
    background-color: #fff;
    box-shadow: 5px 5px -12px 0px #ccc;
  }
}

.center {
  width: 100%;
  height: 100vh;
  background-color: #f9f9f9;
  position: relative;
}

.zkmz {
  width: 100%;
  height: 9rem;
  background: #fff;
  margin-top: 0.625rem;

  .title {
    margin-top: 1.5625rem;
    font-size: 1.25rem;
    margin-left: 5px;
  }

  .desc {
    margin-top: 0.625rem;
    font-size: 14px;
    color: #999999;
    margin-left: 5px;
  }

  p .img {
    display: flex;
    margin-top: 0.625rem;

    img {
      width: 45%;
      margin-left: 0.625rem;
    }
  }
}

// .jingxuan {
//   width: 100%;
//   height: 200px;
//   .doctor {
//     display: flex;
//     flex-wrap: wrap;
//     div {
//       width: 50%;
//       display: flex;

//       img {
//         width: 2.525rem;
//         height: 2.525rem;
//         border-radius: 50%;
//         margin: 0.3rem;
//         border: 1px solid #ccc;
//       }

//       div {
//         p {
//           margin: 0.3125rem;
//         }

//         .title {
//           width: 8rem;
//           overflow: hidden;
//           text-overflow: ellipsis;
//           white-space: nowrap;
//           font-size: 0.8rem;
//           font-weight: 400;
//         }

//         .hospital {
//           width: 8rem;
//           overflow: hidden;
//           text-overflow: ellipsis;
//           white-space: nowrap;
//           font-size: 0.8rem;
//           font-weight: 400;
//         }

//         .hospital_tag_text {
//           width: 5rem;
//           font-size: 0.8rem;
//           font-weight: 400;
//           background-color: rgba(241, 216, 156, 0.849);
//           color: rgba(147, 106, 9, 0.849);
//         }
//       }
//     }
//   }
// }

.tsServer {
  width: 100%;
  height: 32rem;
  margin-top: 0.625rem;
  background: #fff;

  .top-doctor {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .title {
      margin-top: 0.8rem;
      font-size: 1.56rem;
      margin-left: 0.4rem;
    }

    .desc {
      margin-top: 1.4rem;
      font-size: 0.875rem;
      color: #999999;
      margin-right: 0.8rem;
    }

    .docfa {
      margin-top: 1.5rem;
      margin-right: 2.2rem;
      font-size: 0.75rem;
      color: #999999;
    }
  }

  .doctor-name {
    width: 100%;
    height: 40.01rem;
    background: skyblue;
  }

  .img {
    width: 100%;

    margin-top: 1rem;

    .fk-img {
      width: 100%;
      height: 11rem;
      display: flex;
      justify-content: space-around;

      img {
        width: 11.5rem;
        height: 100%;
        border-radius: 10px;

      }
    }

    .pf-img {
      width: 100%;
      height: 6.5rem;
      display: flex;
      justify-content: space-around;
      margin-top: 0.31rem;

      img {
        width: 11.3rem;
        height: 6rem;
        border-radius: 0.1rem;
        border-radius: 10px;
      }
    }

    .gz-img {
      width: 100%;
      display: flex;
      justify-content: space-around;

      img {
        width: 7.6rem;
        border-radius: 0.1rem;
        border-radius: 10px;
      }
    }
  }
}

.tablist {
  display: flex;

  img {
    width: 6.25rem;
    height: 5rem;
    margin: 0.625rem;
    flex-shrink: 0;
  }
}

.bei {
  width: 13rem;
  height: 7rem;
  background: url('../../assets//img//bei.jpg') no-repeat;
}

</style>
